export default `<template>
<div class="map" id="map"></div>
</template>

<script>
import "ol/ol.css";
import Draw from "ol/interaction/Draw";
import Map from "ol/Map";
import View from "ol/View";
import { TileArcGISRest, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import Feature from "ol/Feature";
import { Point, LineString } from "ol/geom";
import { Fill, Stroke, Style, Text, Icon } from "ol/style";
import Overlay from "ol/Overlay";

import CONSTANT from "@/config/constant.js";
import startImg from "@/images/startPoint.png";
import endImg from "@/images/endPoint.png";

export default {
name: "drawRoute",

data() {
  return {
    map: null,
    curRow: null
  };
},

methods: {
  init() {
    this.map = new Map({
      layers: [
        new TileLayer({
          source: new TileArcGISRest({
            url: CONSTANT.GIS_URL
          })
        })
      ],
      target: "map",
      view: new View({
        center: [113.0567, 23.67537],
        maxZoom: 18,
        minZoom: 8,
        zoom: 13,
        projection: "EPSG:4326"
      })
    });
    this.showRouterMap();
  },

  // 路径反显
  showRouterMap() {
    let pointsList = JSON.parse(JSON.parse(this.curRow.gis)); // 获取路径坐标集合
    let roadLine = new LineString(pointsList);
    let roadLineSource = new VectorSource({
      features: [new Feature(roadLine)]
    });
    const roadLineLayer = new VectorLayer({
      source: roadLineSource,
      style: new Style({
        stroke: new Stroke({
          color: "#38A0FF",
          width: 4
        })
      })
    });
    this.map.addLayer(roadLineLayer);

    // 绘制路径标签文字说明
    this.addVectorLabel({
      pointsList: pointsList[0],
      txt: "起"
    });
    this.addVectorLabel({
      pointsList: pointsList[pointsList.length - 1],
      txt: "终"
    });
    this.addVectorLabel({
      pointsList: [pointsList[0][0], pointsList[0][1]],
      txt: this.curRow.name + "，全程" + this.curRow.route_length + "公里",
      fill: "#111111",
      stroke: "#ffffff"
    });
  },

  addVectorLabel(opt) {
    let vectorSource = new VectorSource(); //矢量标注的数据源
    const layer = new VectorLayer({
      source: vectorSource
    }); //矢量标注图层
    this.map.addLayer(layer);
    if (opt.txt == "起" || opt.txt == "终") {
      let newFeature = new Feature({
        geometry: new Point(opt.pointsList || [])
      });
      newFeature.setStyle(
        new Style({
          image: new Icon({
            src: opt.txt == "起" ? startImg : endImg,
            offset: [0, -26],
            offsetOrigin: "bottom-right",
            size: [32, 60]
          }),
          fill: new Fill({ color: "#ffffff" }),
          zIndex: 1
        })
      );
      //   将新要素添加到数据源中
      vectorSource.addFeature(newFeature);
      return;
    }

    //使用overlayer来显示总路程
    let overlayerElement = document.createElement("div");
    overlayerElement.className = "ol-tooltip-draw-route";
    overlayerElement.innerHTML = opt.txt;
    const overlayObj = new Overlay({
      element: overlayerElement,
      offset: [0, -30],
      positioning: "bottom-center"
    });
    overlayObj.setPosition(opt.pointsList);
    this.map.addOverlay(overlayObj);
  }
},

mounted() {
  this.curRow = {
    gis:
      '"[[112.95597776205078,23.663277654777147],[112.97758649701983,23.671457318341225],[112.98344358236328,23.65388691621726],[112.98748192044705,23.673173932110757],[112.99485391953759,23.65620949443789],[112.99737819254197,23.67388031700054],[112.98820554677706,23.680767169060328],[112.9912492335939,23.685170946236795],[112.98990926193787,23.691258632994895],[112.98265162098099,23.704648371967955],[112.99416323250037,23.702123662187837],[112.98679209255491,23.698034258668663],[112.97770390926737,23.697075101772675],[112.90797899874089,23.726055377553425],[112.90409129655383,23.72080468623361],[112.90075935121787,23.731053727749245]]"',
    route_length: "27.46",
    update_time: "2020-08-17 17:08:10.183",
    account_id: 1,
    is_share: 0,
    name: "全部摄像机设备",
    count: 8,
    id: 22,
    share_account: ""
  };
  this.init();
}
};
</script>
<style lang="less" scoped>
.map {
height: 100%;
}
/deep/ .ol-tooltip-draw-route {
padding: 3px 8px;
background-color: #ffcc33c4;
font-size: 12px;
border-radius: 2px;
color: black;
}
</style>
`